<template>
	<view class="page" :style="{minHeight:windowHeight+'px'}">
		<view class="show">
			<view class="select" v-for="(item,index) of bank" @click="tabClick(index)">
				<view class="select-item" @click="selectTick">
					<view class="select-content">
						<image class="select-icon" v-if="item.bank_type == 3" src="../../../../static/bank.png"></image>
						<image class="select-icon" v-if="item.bank_type == 2" src="../../../../static/zfb1.png"></image>
						<image class="select-icon" v-if="item.bank_type == 1" src="../../../../static/wx1.png"></image>
						<view class="select-name">
							<text>{{item.name}}</text>
							<text v-if="item.bank_type == 1">微信</text>
							<text v-if="item.bank_type == 2">支付宝</text>
							<view class="item-delect">
								<text>{{item.thumb}}</text>
								<!-- <image @click="deleteCar(item.id)" src="../../../../static/delete.png"></image> -->
							</view>
						</view>
					</view>
					<view class="select-tick" v-show="idx==index">
						<image src="../../../../static/tick.png"></image>
					</view>
				</view>
			</view>
			<!-- <view class="select" v-for="(item,index) of selectName" @click="tabClick(item)">
				<view class="select-item" @click="selectTick">
					<view class="select-content">
						<image class="select-icon" :src="item.icon"></image>
						<view class="select-name">
							<text>{{item.name}}</text>
							<text>{{item.binding}}</text>
						</view>
					</view>
					<view class="select-tick" v-show="idx==index">
						<image src="../../../../static/tick.png"></image>
					</view>
				</view>
			</view> -->
			<!-- <view class="add-bank" @click="gotoPath('/pages/user/add-bankCard/add-bankCard')">
				<image src="../../../../static/add.png"></image>
				<text>添加银行卡</text>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectName: [{
						'name': '微信',
						'id': '0',
						'icon': '../../../../static/wx1.png',
						//'binding': '未绑定',
					},
					{
						'name': '支付宝',
						'icon': '../../../../static/zfb1.png',
						//'binding': '未绑定',
						'id': '1'
					},
					{
						'name': '银行卡',
						'icon': '../../../../static/complete.png',
						// 'binding': '尾号6666储蓄卡',
						'id': '2'
					},
				],
				idx: "0",
				windowHeight:'',
				bank:[],
			};
		},
		onLoad() {
			this.getData();
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			gotoPath(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path,
					});
				} else {
					self[path]();
				}
			},
			/* 获取数据 */
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/bankCard', {}, function(res) {
					console.log(res);
					self.bank = res.data.bank;
					self.bank.forEach(item =>{
						if(item.bank_type==3){
							var tel = item.bank_code;
							    tel = "" + tel;
							    var newTel = tel.substr(0,4) + " **** **** **** " + tel.substr(15)
							   	item.thumb = newTel
								
						}else{
							var tel = item.bank_code;
							    tel = "" + tel;
							    var newTel = tel.substr(0,3) + " **** " + tel.substr(7)
							   	item.thumb = newTel
								
						}						
					})
					self.loadding = false;
					uni.hideLoading();
				});
			},
			/* 切换导航条 */
			tabClick(index) {
				console.log(index)
				this.idx =index;
			},
			selectTick(e) {
				let self = this;
				let curTime = new Date().getTime();
				let lastTime = self.lastTapDiffTime;
				self.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {

					clearTimeout(self.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					self.lastTapTimeoutFunc = setTimeout(function() {
						//console.log(self.bank[self.idx]);
						//console.log(self.selectName[self.idx].name);
						let bank = JSON.stringify(self.bank[self.idx]);
						// uni.navigateTo({
						// 	url: '/pages/user/my-account/withdraw/withdraw?select=1&bank=' + bank,
						// })
						//console.log("单击")
					}, 300);
				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	}
	.show{
		padding-top: 20rpx;
	}
	.select-item,
	.select-content {
		height: 120rpx;
		padding: 0 20rpx 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F4F4F4;
		overflow: hidden;
	}

	.select-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 30rpx;
	}

	.select-tick {
		width: 50rpx;
		height: 50rpx;
	}

	.select-name {
		display: flex;
		flex-direction: column;

	}

	.select-name text{
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.item-delect text {
		color: #a6a5a5;
	}

	.add-bank {
		width: 96%;
		height: 100rpx;
		margin: 40rpx auto 20rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		color: #007AFF;
		line-height: 100rpx;
		font-size: 36rpx;
		border-radius: 14rpx;
	}

	.add-bank image {
		width: 40rpx;
		height: 40rpx;
	}

	.add-bank text {
		margin: 0 20rpx;
	}
</style>
